<template>
  <h5 class="m-0 py-2 text-neutral-300">我的设置</h5>
  <var-tabs elevation class="shadow-none" color="rgb(17,52,136)" active-color="#fff"
    inactive-color="hsla(0, 0%, 100%, .6)" v-model:active="active">
    <var-tab>修改信息</var-tab>
    <var-tab>使用协议</var-tab>
    <var-tab>隐私政策</var-tab>
    <var-tab>安全投诉</var-tab>
    <var-tab>注销说明</var-tab>
    <var-tab>联系我们</var-tab>
    <var-tab>关于我们</var-tab>
  </var-tabs>
  <var-tabs-items class="mt-2" v-model:active="active">
    <var-tab-item>
      <editName/>
      <editSex class="shadow-none" />
      <editpw />
    </var-tab-item>
    <var-tab-item>
      <iframe class="ifrDiv" style="width: 90vw; height: 72vh; border:none;padding-bottom: 20px;"
        src="https://www.teach-book.com/reading-protocol/"></iframe>
    </var-tab-item>
    <var-tab-item>
      <iframe class="ifrDiv" style="width: 90vw; height: 72vh; border:none;padding-bottom: 20px;"
        src="https://www.teach-book.com/reading-privacy/"></iframe>
    </var-tab-item>
    <var-tab-item>
      <div class="px-4 py-2">
        <var-card>
          <template #description>
            <h5 class="text-left px-2 py-2 m-0 textstyle font-normal">
              您在使用英文读书会产品或服务的过程中，如果认为您的个人信息没有得到根据《隐私政策》规定的保护，您可以通过以下方式联系我们，我们将在十五个工作日内真诚地处理您的投诉及建议。</h5>
            <h5 class="text-left px-2 m-0 text-gray-500 font-normal"><span
                class="font-semibold textstyle">个人信息泄露投诉举报邮箱:</span>1097907559@qq.com</h5>

          </template>
        </var-card>
      </div>

    </var-tab-item>
    <var-tab-item>

      <div class="px-4 py-2">
        <var-card>
          <template #description>
            <h5 class="text-left px-2 py-2 m-0 text-gray-500 font-normal textstyle"><span
                class="font-semibold">请注意：</span>注销请联系客服！注销英文读书会相关产品或服务账号是不可恢复的操作。在注销账号之后，我们将停止为您提供产品或服务，并将删除该账号项下的您的个人信息。
            </h5>
            <h5 class="text-left px-2 py-2 m-0 text-gray-500 font-normal textstyle">
              注销账号请联系客服电话/微信:13578925230,或者电子邮件:1097907559@qq.com;注销账号的处理时效为3个工作日。

            </h5>

          </template>
        </var-card>
      </div>

    </var-tab-item>
    <var-tab-item>


      <div class="px-4 py-2">
        <var-card>
          <template #description>
            <h5 class="text-left px-2 pt-2 m-0 text-gray-500 font-normal textstyle"><span
                class="font-semibold">微信客服：</span>13578925230（微信同步）</h5>
            <h5 class="text-left px-2 m-0 text-gray-500 font-normal textstyle"><span
                class="font-semibold">发送邮件：</span>1097907559@qq.com</h5>

          </template>
        </var-card>
      </div>
    </var-tab-item>
    <var-tab-item>


      <div class="px-4 py-2">
        <var-card>
          <template #description>
            <h5 class="px-2 m-0 text-gray-500 font-normal text-xs textstyle ch">Copyright 2023
              长春市大可老师网络科技有限责任公司 版权所有</h5>

          </template>
        </var-card>
      </div>
    </var-tab-item>
  </var-tabs-items>
</template>

<script setup>
import { reactive, ref } from "vue";
import editSex from "@/components/editSex.vue";
import editpw from "@/components/editpw.vue";
import editName from "@/components/editName.vue";
const active = ref(0);
import { loginStore } from "@/store/user";
import { postData } from "@/utils/api";
const store = loginStore();
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
  user = store.getUserInfo;
} else {
  user = JSON.parse(store.getUserInfo?.userInfo);
}
const unsubscribe = async () => {
  await postData("", {
    id: user.id,
  }).then(res => {

  })
}
</script>

<style scoped>
.textstyle {
  color: #575d6f;
  line-height: 1rem;
  font-size: 8px;
}
:deep(.var-tab){
  font-size: 8px;
}
:deep(.var-input__input){
  font-size: 8px;
}
.ch{
  height: 50vh;
  line-height: 50vh;
}
</style>
